<!--
 * @Author      : ZhouQiJun
 * @Date        : 2025-07-30 08:57:56
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-08-10 17:55:57
 * @Description : setupBaseLayer 用法测试
-->
<script setup>
import { Event, useEvents, useMap } from 'ol-vue-hooks'

import { baseLayers, guiYang } from './testData'

const mapKey = 'setupEvents'
const { setTarget } = useMap(
  {
    center: guiYang,
    zoom: 10,
    projection: 'EPSG:4326',
  },
  baseLayers[0],
  mapKey,
)

const { isOn } = useEvents(Event.DOUBLE_CLICK, onClick, mapKey)

function onClick(type, attachment) {
  console.log({ type, attachment })
}
</script>

<template>
  <div class="TheMapEvents">
    <div :ref="setTarget"></div>
    <div class="desc">
      <p>绑定 dblclick 事件了吗？{{ isOn }}</p>
    </div>
  </div>
</template>

<style lang="scss">
.TheMapEvents {
  & > :first-child {
    width: 500px;
    height: 300px;
    background-color: lightblue;
  }
}
</style>
